<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ubuntu资源遭遇高危反击Shell攻击</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.2/dist/tailwind.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1"></script>
</head>

<body class="bg-gray-100 text-gray-800 font-sans leading-normal tracking-normal">

    <div class="container mx-auto px-4 py-8">
        <!-- Header -->
        <header class="mb-6">
            <h1 class="text-3xl font-bold mb-2">Ubuntu资源遭遇高危反击Shell攻击</h1>
            <p class="text-gray-700 text-lg">
                taomingwei-node3-ubuntu自2022年4月3日至2025年4月8日共遭受13次网络攻击，包括检测到Linux可执行命令和高风险的perl反击shell事件。建议立即排查并采取措施防止进一步恶意活动。
            </p>
        </header>

        <!-- Overview -->
        <section class="mb-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <div class="bg-white p-4 rounded shadow-md text-center" v-for="(item, index) in overviewData"
                    :key="index">
                    <span class="text-xl font-bold">{{ item.value }}</span>
                    <p class="mt-1 text-gray-600">{{ item.label }}</p>
                </div>
            </div>
        </section>

        <!-- Bar Charts -->
        <section class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div v-for="(chart, index) in barCharts" :key="index" class="bg-white p-4 rounded shadow-md">
                <h3 class="text-xl font-bold mb-2">{{ chart.title }}</h3>
                <canvas :id="'barChart' + index"></canvas>
            </div>
        </section>

        <!-- Pie Charts -->
        <section class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div v-for="(chart, index) in pieCharts" :key="index" class="bg-white p-4 rounded shadow-md">
                <h3 class="text-xl font-bold mb-2">{{ chart.title }}</h3>
                <canvas :id="'pieChart' + index"></canvas>
            </div>
        </section>

    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const overviewData = [
                { label: "总事件数量", value: "13" },
                { label: "最高风险等级", value: "4" },
                { label: "主要攻击类型", value: "T1059, T1082" },
                { label: "时间跨度", value: "2022-04-03 至 2025-04-08" },
                { label: "受影响资源", value: "taomingwei-node3-ubuntu" }
            ];

            const barCharts = [
                {
                    title: "不同攻击类型的事件数量",
                    data: [
                        { label: "T1564.001", value: 1 },
                        { label: "T1078.003", value: 1 },
                        { label: "T1082", value: 1 },
                        { label: "T1059", value: 4 },
                        { label: "T1027.001", value: 1 },
                        { label: "T1070.002", value: 1 }
                    ]
                },
                {
                    title: "不同告警级别的事件数量",
                    data: [
                        { label: "3级", value: 5 },
                        { label: "4级", value: 8 }
                    ]
                }
            ];

            const pieCharts = [
                {
                    title: "攻击类型分布",
                    data: [
                        { label: "T1059", value: 3 },
                        { label: "T1082", value: 1 },
                        { label: "T1078.003", value: 1 },
                        { label: "其他", value: 8 }
                    ]
                },
                {
                    title: "风险等级分布",
                    data: [
                        { label: "告警级别4", value: 5 },
                        { label: "告警级别3", value: 8 },
                        { label: "其他", value: 0 }
                    ]
                }
            ];

            // Render bar charts
            barCharts.forEach((chart, index) => {
                const ctx = document.getElementById('barChart' + index).getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: chart.data.map(item => item.label),
                        datasets: [{
                            label: chart.title,
                            data: chart.data.map(item => item.value),
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            });

            // Render pie charts
            pieCharts.forEach((chart, index) => {
                const ctx = document.getElementById('pieChart' + index).getContext('2d');
                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: chart.data.map(item => item.label),
                        datasets: [{
                            label: chart.title,
                            data: chart.data.map(item => item.value),
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.7)',
                                'rgba(54, 162, 235, 0.7)',
                                'rgba(255, 206, 86, 0.7)',
                                'rgba(75, 192, 192, 0.7)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        }
                    }
                });
            });

        });
    </script>
</body>

</html>